import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
// import mockData from './data.json'

// JSX语法学习
let root = document.getElementById('root');
let h1 =<h1>this is the title 0f  h1<span><span>这是第一个作为元素</span></span></h1>
//生命周期：
// 生命周期是指组件从实例化到渲染到最终被销毁到过程，在整个生命周期中我们可以调用很多是事件，也熟称为钩子函数
// React生命周期到三个阶段：
// Mounting:将组件插入到DOM中；
// Updating：将组件更新到DOM中；
// Unmounting:将组件移除DOM中。

// 生命周期中到钩子函数（事件、方法）：
// CommentWillMount:组件将被渲染，AJAX，添加动画前到类
// ComponentDidMount：组件渲染完成，添加动画
// componentWillReceiveProps:组件将要接收props数据，此时可以查看接收的props数据是什么
// ShouldComponentUpdate:组件接收到新的props或则state，判断是否更新，返回布尔值
// ComponentWillUpdate:组件将要更新
// ComponentDidUpdate:组件已经完成更新
// ComponentWillUnmount:组件将要卸载


class Comlife extends Component{
  constructor(props){
    super(props);
    this.state={
      msg:'我是来自state中的信息',
    };
    console.log('Comlife这个动态组件的构造函数被调用了----  第一')
  };
  componentWillMount(){
    console.log('ComponentWillMount生命周期钩子被调用-----第二')
  };
  componentDidMount(){
    console.log('componentDidMount这个生命周期钩子被调用---第四')
  };
  componentWillReceiveProps(){
    console.log('componentWillReceiveProps这个生命周期钩子被调用')
  };
  shouldComponentUpdate(){
    console.log('shouldComponentUpdate这个生命周期钩子被调用--判断是否要更新内容---第五');
    console.log(this.state.msg);
    if(this.state.msg.toString().includes('更新')){
      alert('更新');
      return true
    }else{
      let value = prompt('对不起无法更新内容');
      console.log(`-------  ${value}----------`)
      return false
    }

  };
  componentWillUpdate(){
    console.log('componetWillUpdate生命周期钩子被调用--第六')
  };
  componentDidUpdate(){
    console.log('componentDidUpdate生命周期钩子被调用---第七')
  };
  componentWillUnmount(){
    console.log('componentWillUnmount生命周期钩子被调用')
  };
  change=()=>{
    console.log('change函数被调用了')
    this.setState({
      msg:'我是更新了的msg'
    })
  }
  render(){
    console.log('render渲染函数执行---第三');
    return (
      <div>
        <h1>{this.state.msg}</h1>
        <button onClick={this.change}>组件更新</button>
      </div>
    )
  }
}
class ParentCom extends Component{
  constructor(props){
    super(props);
    this.state={
      isShow:true
    }
    this.removeCom=this.removeCom.bind(this);
  };
  removeCom=function(){
    this.setState({
      isShow:false
    })
  }
  render(){
      if(this.state.isShow){
        return(
          <div>
            <Comlife/>
            <button onClick={this.removeCom}>卸载组件Comlife</button>
          </div>
        )
      }else{
        return(
          <footer>组件Comlife已经被卸载</footer>
        )
      }
  }
}
ReactDOM.render(
  <ParentCom/>,
  root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
